<template>
	<u-skeleton :loading="isLoading" rows="10">
		<view>

			<view class="brush" v-if="topicList.testpaper">
				<view class="top" style="height: 60rpx; line-height: 60rpx;">

					<view class="floatleft" style="float: left;">

						<view class="y_tag y_tag_bgPrimary floatleft" style="margin-top:14rpx;margin-left: 30rpx;">
							第 {{index+1}} 题
						</view>
					</view>


					<view class="floatright qcount" style="position: absolute; right: 0px; top:0rpx">
						<view class="icon iconfont icon-renwu" @click="()=>tankaung_show=true">
							<text style="padding-left: 6rpx;">{{topicList.testpaper.length}}</text>
						</view>
					</view>

				</view>






				<view style="height: 20rpx; background-color: rgb(249, 249, 249);">
				</view>


				<view class="allContent" :animation="animation">

					<view class="content">

						<view class="title-type">
							<view class="y_cell" style="border-bottom: 1px solid #eee;">

								<view class="y_cell_left">
									<view style="float: left;">
										<view class="y_tag floatright y_tag_bgPrimary">
											单选题
										</view>

									</view>
								</view>


								<view class="y_cell_right">
									<view style="float: left;">
										<view class="y_tag floatright y_tag_bgWarning">
											{{topicList.testpaper[index].labels}}
										</view>

									</view>

								</view>


							</view>

						</view>


						<view class="" style="width: 96%; padding:10rpx;margin-top: 10rpx;">
							<rich-text :nodes="topicList.testpaper[index].content"></rich-text>
						</view>

					</view>

					<view style="width: 100%;" v-for="(item,i) in topicList.testpaper[index].options" :key="item.id">
						<view class="options" @click="selected(item)" :class="[item.isSelected?'selectOptions':'']">
							{{xuanA[i]}}.{{item.content}}
						</view>

					</view>
					<u-divider />



					<u-button type="warning" class="prev" @click="prev" :disabled="index==0">上一题</u-button>

					<view class="" style="margin-top: 20rpx;">
						<u-button type="primary" v-if="index != topicList.testpaper.length - 1" class="next"
							@click="next">下一题</u-button>

						<u-modal :show="show_jiao" @confirm="complete" ref="uModal" @cancel="()=>show_jiao=false"
							showCancelButton :asyncClose="true">
							确认交卷吗?</u-modal>
						<u-button @click="showModal_jiao" type="success" style="width: 96%;"
							v-if="index == topicList.testpaper.length - 1">交 卷</u-button>




					</view>
				</view>


				<u-popup :show="tankaung_show" mode="top" custom-style="height: 30%;" @close="()=>tankaung_show=false">
					<view style="width: 100%; height: 100%; padding-top: 20rpx;padding-bottom: 20rpx;">
						<view v-for="(item,i) in topicList.testpaper" class="tan" :key="item.id"
							:class="[item.isSelected==true?'selectOptions':'']" @click="checkTopic(i)">
							{{i+1}}
						</view>
					</view>
				</u-popup>






			</view>

		</view>
	</u-skeleton>
</template>

<script>
	import dayjs from 'dayjs';
	import {
		GetRandomQuestions,
		MockJiaoJuan,
		StartMock
	} from '../../../../../api/brush_questions.js';
	export default {
		data() {
			return {
				/**
				 * 抽提组成的试卷id
				 */
				id: '',
				/**
				 * 开始考试模态框状态
				 */
				show: false,
				/**
				 * 交卷模态框状态
				 */
				show_jiao: false,
				/**
				 * 刷题数量
				 */
				topicnum: 10,
				/**
				 * 选中的题库
				 */
				checkboxValue1: [],
				/**
				 * 题库
				 */
				checkboxList1: [],
				/**
				 * 根据题库获取到的题目
				 */
				topicList: [],
				isState: false,
				index: 0,
				xuanA: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
				//答题卡
				datika: [],
				animation: null, //动画对象
				jiaodu: 0,
				/**
				 * 答题卡弹出层状态
				 */
				tankaung_show: false,
				isLoading: true,
				code: "",
				startTime:""
			}
		},
		onLoad(option) {
			this.code = option.id;
			
				this.sure();
		},
		onShow() {

			// let val = this.checkboxValue1;
			
			// if (val.find(d => d == -1)) {
			// 	this.checkboxList1.map(d => {
			// 		if (d.label != -1) {
			// 			d.disabled = true;
			// 		}
			// 	})
			// } else {
			// 	this.checkboxList1.map(d => {
			// 		d.disabled = false;
			// 	})
			// 	if (val.length != 0) {
			// 		this.checkboxList1.map(d => {
			// 			if (d.label == -1) {
			// 				d.disabled = true;
			// 			}
			// 		})
			// 	}
				// this.checkboxValue1 = val;

			// }

		},
		methods: {
			/**
			 * 交卷按钮触发事件
			 */
			complete() {
				const {
					topicList,
					datika,
					id
				} = this;
				let testpaper = topicList.testpaper;
				this.show_jiao = false;
				if (datika.length != testpaper.length) {
					uni.showToast({
						title: '还有题目未作答',
						icon: "none"
					})

					this.tankaung_show = true;
				} else {
					uni.showLoading({
						title: "请稍后....",
					});
	
					MockJiaoJuan({
						aid: id,
						answers: datika,
					}).then((res) => {
						if (res.result === 0) {
							uni.showToast({
								title: '操作成功',
								icon: "none"
							})
                             
							 console.log(res,"交卷跳转结果");
							setTimeout(() => {
								uni.hideLoading();
								uni.redirectTo({
									url:"/pages/brush_questions/mock_questions/result_Mock/result_Mock?id="+id
								})
								
							}, 1500);

						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})

				}

			},
			/**
			 * 弹出框选中哪题跳转到哪题
			 */
			checkTopic(index) {
				this.index = index;
				this.tankaung_show = false;
			},
			/**
			 * 上一题
			 */
			prev() {
				let {
					index,
					topicList
				} = this;
				let testpaper = topicList.testpaper;
				if (index <= 0) {
					return
				}

				if (index <= testpaper.length - 1) {
					//设定动画
					let animation = uni.createAnimation({
						duration: 300,
						delay: 0,
						timingFunction: "linear",
					});

					this.animation = animation;


					setTimeout(() => {
						this.changeQuestion(0);
					}, 50);
					setTimeout(() => {
						this.index = index - 1;
					}, 350);
				}
			},

			/**
			 * 下一题
			 */
			next() {

				let {
					index,
					topicList
				} = this;
				let testpaper = this.topicList.testpaper;
				if (index < testpaper.length - 1) {
					//设定动画
					let animation = uni.createAnimation({
						duration: 300,
						delay: 0,
						timingFunction: "linear",
					});

					this.animation = animation;


					setTimeout(() => {
						this.changeQuestion(0);
					}, 50);
					setTimeout(() => {
						this.index = index + 1;

					}, 350);
				}
			},


			/**
			 * 选中背景变色 计入答题卡
			 * @param {} event 
			 */
			selected(val) {
				let answer = val;
				const {
					datika,
					index,
					topicList,
					id
				} = this;

				let testpaper = this.topicList.testpaper;
				let temp = datika.find(d => d.qid == testpaper[index].id);
				if (temp == undefined) {
					datika.push({
						qid: testpaper[index].id,
						answers: [answer.id]
					})
				} else {
					datika.map(d => {
						if (d.qid == temp.qid) {
							d.answers = [answer.id];
						}
					})
				}

				testpaper[index].isSelected = true;
				testpaper[index].options.map(d => {
					d.isSelected = false;
					if (d.id == answer.id) {
						d.isSelected = true;
					}
				})


				this.topicList.testpaper = testpaper;
				this.datika = datika;
				console.log(this.topicList, this.datika,this.startTime);
				
				this.$forceUpdate();

				if (index < testpaper.length - 1) {
					//设定动画
					let animation = uni.createAnimation({
						duration: 300,
						delay: 0,
						timingFunction: "linear",
					});

					this.animation = animation;


					setTimeout(() => {
						this.changeQuestion(0);
					}, 50);
					setTimeout(() => {

						this.index = index + 1;

					}, 350);
				}


			},
			//动画旋转
			//旋转
			changeQuestion: function(action) {
				let {
					animation,
					jiaodu
				} = this;
				//顺时针旋转10度
				if (action == 0) {
					jiaodu += 360;
				} else {
					jiaodu -= 360;
				}
				// animation.rotate3d(jiaodu, jiaodu, jiaodu, jiaodu).step();
				this.animation.scale3d(0.01, 1, 445).step();
				this.animation.scale3d(1, 1, 461).step();

				//输出动画
				this.animation = animation.export();
				this.jiaodu = jiaodu;

			},
			//点击开始刷题模态框
			showModal() {
				this.show = true;
			},
			//点击开始刷题模态框
			showModal_jiao() {
				this.show_jiao = true;
			},
			//取消根据题库刷题
			quxiao() {
				this.show = false;
			},
			//确认刷题
			confirm() {
				this.sure();
			},

			//题目数量
			topicChange(name) {
				this.topicnum = name.value;

			},

			//获取页面数据
			sure() {
				// console.log(this.code);
				StartMock({
					id:this.code
				}).then(res => {
		            console.log(res);
					if (res.result === 0) {
                       
						res.data.testpaper.map(d => {
							d.isSelected = false;
							d.options.map(e => e.isSelected = false)
						});
                        //设置开始考试时间
						this.startTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
						this.topicList = res.data;
						
						this.id = res.data.code;
						this.isLoading=false;
					} else if (res.result == -1) {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					} else {
						uni.showToast({
							title: "异常,请联系技术人员处理",
							icon: "none"
						});
						uni.reLaunch({
							url:"/pages/index/index"
						})
					}
				})
			},
			/**复选框改变事件
			 * @param {Object} 
			 */
			checkboxChange(val) {
				if (val.find(d => d == -1)) {
					this.checkboxList1.map(d => {
						if (d.label != -1) {
							d.disabled = true;
						}
					})
				} else {
					this.checkboxList1.map(d => {
						d.disabled = false;
					})
					if (val.length != 0) {
						this.checkboxList1.map(d => {
							if (d.label == -1) {
								d.disabled = true;
							}
						})
					}

				}
				this.checkboxValue1 = val;
			}
		}
	}
</script>

<style>
	.top {
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #eee;
		background: #fff;
	}

	.qcount {
		margin-right: 20rpx;
		color: rgb(199, 196, 196);
	}


	.title-type {
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fff;
	}


	.title-content {
		background-color: rgb(241, 241, 241);
		min-height: 100rpx;
		width: 98%;
		border-radius: 8rpx;
		margin-left: 0.9%;

		padding: 0 8rpx 8rpx 8rpx;
	}

	.content {
		width: 96%;
		margin-left: 2%;
		padding-bottom: 10rpx;
	}


	.options {
		border: 1px solid #eee;
		width: 90%;
		padding: 2.5%;
		margin-top: 20rpx;
		margin-left: 18rpx;
		border-radius: 12rpx;
	}

	.selectOptions {
		background-color: rgb(25, 137, 250) !important;
		color: #fff !important;
	}

	.prev,
	.next {
		width: 96%;
		margin-left: 2%;
		margin-top: 20rpx;
	}


	.tan {
		width: 50rpx;
		height: 50rpx;
		margin: 10rpx;
		margin-left: 10rpx;
		line-height: 50rpx;
		text-align: center;
		float: left;
		border: 1px solid #1989fa;
		color: #1989fa;
		border-radius: 10rpx;
	}

	.allContent {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, .12), 0 0 12rpx rgba(0, 0, 0, .04);
	}



	.u-count-down {
		color: #fff;
	}

	.time {
		color: #fff;
	}




	.examing-title {
		margin-top: 20rpx;
		width: 100%;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
	}


	.cell-hover-class {
		background-color: rgb(235, 237, 238);
	}

	/* 或者单是设置透明度 */
	.cell-hover-class {
		opacity: 0.5;
	}
</style>